<template>
  <div>
    <a-card :bordered="false" style="width: 100%">
      <a-form-model ref="demandInfoForm" :rules="demandInfoRules" :model="demand">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              label="需求联系人"
              prop="demandContact"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              :colon="false"
            >
              <a-input v-model="demand.demandContact" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="业务部门"
              prop="bussinessDepartment"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              :colon="false"
            >
              <a-input v-model="demand.bussinessDepartment" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="OA联系单编号"
              prop="oaNo"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              :colon="false"
            >
              <a-input v-model="demand.oaNo" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="期望上线时间"
              prop="expectedDate"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 12 }"
              :colon="false"
            >
              <a-date-picker v-model="demand.expectedDate" format="YYYY-MM-DD" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item
              label="需求名称"
              prop="demandName"
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 20 }"
              :colon="false"
            >
              <a-input v-model="demand.demandName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="接入联机必要性"
              prop="onlineNecessary"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="demand.onlineNecessary" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="用户查询行为"
              prop="userQueryAction"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 12 }"
              :colon="false"
            >
              <a-select v-model="demand.userQueryAction">
                <a-select-option value="对客">对客</a-select-option>
                <a-select-option value="非对客">非对客</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              label="大数据支撑集市名称"
              prop="dataSourceSystem"
              :label-col="{ span: 12 }"
              :wrapper-col="{ span: 12 }"
              :colon="false"
            >
              <a-input v-model="demand.dataSourceSystem" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="大数据支撑集市简称"
              prop="dataSourceSystemAbbr"
              :label-col="{ span: 12 }"
              :wrapper-col="{ span: 12 }"
              :colon="false"
            >
              <a-input v-model="demand.dataSourceSystemAbbr" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="支撑集市负责人"
              prop="dataSourceSystemPrincipal"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="demand.dataSourceSystemPrincipal" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              label="是否已投产联机平台"
              prop="isOperation"
              :label-col="{ span: 12 }"
              :wrapper-col="{ span: 12 }"
              :colon="false"
            >
              <a-select v-model="demand.isOperation">
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="0">否</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" v-if="demand.isOperation == 1">
            <a-form-model-item
              label="计划投产时间"
              prop="expectedOperationDate"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-date-picker v-model="demand.expectedOperationDate" format="YYYY-MM-DD" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              label="调用方系统"
              prop="invokeSystem"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              :colon="false"
            >
              <a-input v-model="demand.invokeSystem" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="调用方系统简称"
              prop="invokeSystemAbbr"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 14 }"
              :colon="false"
            >
              <a-input v-model="demand.invokeSystemAbbr" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="调用方系统负责人"
              prop="invokeSystemPrincipal"
              :label-col="{ span: 12 }"
              :wrapper-col="{ span: 12 }"
              :colon="false"
            >
              <a-input v-model="demand.invokeSystemPrincipal" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'demandInfoTab',
  props: {
    demandInfo: {
      type: Object
    }
  },
  data() {
    return {
      demand: this.demandInfo,
      demandInfoRules: {
        demandContact: [{ required: true, message: '请输入需求联系人', trigger: 'blur' }],
        bussinessDepartment: [{ required: true, message: '请输入业务部门', trigger: 'blur' }],
        oaNo: [{ required: true, message: '请输入OA联系单号', trigger: 'blur' }],
        expectedDate: [{ required: true, message: '请选择期望上线时间', trigger: 'blur' }],
        demandName: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
        onlineNecessary: [{ required: true, message: '请确定接入联机必要性', trigger: 'blur' }],
        userQueryAction: [{ required: true, message: '请选择用户查询行为', trigger: 'blur' }],
        dataSourceSystem: [{ required: true, message: '请输入大数据支撑集市名', trigger: 'blur' }],
        dataSourceSystemAbbr: [{ required: true, message: '请输入支撑集市简称', trigger: 'blur' }],
        dataSourceSystemPrincipal: [{ required: true, message: '请输入支撑集市负责人', trigger: 'blur' }],
        isOperation: [{ required: true, message: '是否已投产联机平台', trigger: 'blur' }],
        expectedOperationDate: [{ required: true, message: '请选择日期', trigger: 'blur' }],
        invokeSystem: [{ required: true, message: '请输入调用方系统', trigger: 'blur' }],
        invokeSystemAbbr: [{ required: true, message: '请输入调用方系统简称', trigger: 'blur' }],
        invokeSystemPrincipal: [{ required: true, message: '请输入调用方负责人', trigger: 'blur' }]
      }
    }
  },
  watch: {
    demandInfo(newVal) {
      this.demand = newVal
    }
  },
  methods: {
    validateDemandInfoForm() {
      let flag
      this.$refs.demandInfoForm.validate(valid => {
        if (valid) {
          flag = '-1'
        } else {
          flag = '0'
        }
      })
      return flag
    }
  }
}
</script>

<style scoped lang="less"></style>
